<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-12-27 11:05:07
-->
<template>
  <div
    id="webgl"
    class="h-full w-full overflow-hidden"
    ref="webgl"
  >
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// import Stats from '../../static/libs/stats.min'
const camera = ref({})
const renderer = ref({})
// const stats = ref({})
camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
renderer.value = new THREE.WebGLRenderer()
// stats = new Stats()
const webgl = ref(null)
onMounted(() => {
  init()
  window.onresize = () => {
    init()
  }
})
const init = () => {
  let scene = new THREE.Scene()
  // let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000),
  // let renderer = new THREE.WebGLRenderer()
  renderer.value.setClearColor('#eeeeee')
  renderer.value.setSize(window.innerWidth - 198, window.innerHeight - 80)
  renderer.value.shadowMapEnabled = true
  /** 坐标系 */
  let axes = new THREE.AxesHelper(20)
  scene.add(axes)
  /** 增加点光源 */
  let spotLight = new THREE.SpotLight(0xffffff)
  spotLight.castShadow = true
  spotLight.position.x = -20
  spotLight.position.y = 40
  spotLight.position.z = -20
  scene.add(spotLight)
  /** 增加面 */
  let planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1)
  let planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc })
  let plane = new THREE.Mesh(planeGeometry, planeMaterial)
  plane.receiveShadow = true
  plane.rotation.x = -0.5 * Math.PI
  plane.position.x = 15
  plane.position.y = 0
  plane.position.z = 0
  scene.add(plane)
  /** 增加方体 */
  let cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
  let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
  let cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
  cube.castShadow = true
  cube.position.x = -4
  cube.position.y = 3
  cube.position.z = 0
  scene.add(cube)
  let sphereGeometry = new THREE.SphereGeometry(5, 20, 20)
  let sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff })
  let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
  sphere.castShadow = true
  sphere.position.x = 20
  sphere.position.y = 5
  sphere.position.z = 0
  scene.add(sphere)
  /** 设置镜头 */
  camera.value.position.x = -30
  camera.value.position.y = 40
  camera.value.position.z = 30
  camera.value.lookAt(scene.position)
  webgl.value.appendChild(renderer.value.domElement)
  /** dat.GUI */
  class Controls {
    constructor() {
      this.rotationSpeed = 0.02
      this.bouncingSpeed = 0.02
    }
  }
  let controls = new Controls()
  // this.gui.add(controls, 'rotationSpeed', 0, 0.5)
  // this.gui.add(controls, 'bouncingSpeed', 0, 0.5)
  let step = 0
  renderScene()
  function renderScene() {
    // that.initStats().update()
    cube.rotation.x += controls.rotationSpeed
    cube.rotation.y += controls.rotationSpeed
    cube.rotation.z += controls.rotationSpeed
    /** 小球弹跳 */
    step += controls.bouncingSpeed
    sphere.position.x = 20 + (10 * (Math.cos(step)))
    sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)))
    requestAnimationFrame(renderScene)
    renderer.value.render(scene, camera.value)
  }
  // const initStats = () => {
  //   stats.setMode(0)
  //   stats.domElement.style.position = 'absolute'
  //   stats.domElement.style.left = '0px'
  //   stats.domElement.style.top = '56px'
  //   webgl.value.appendChild(stats.domElement)
  //   return stats
  // }
}
</script>